// 封装一个指令类型的插件 实现图片的懒加载
import { useIntersectionObserver } from '@vueuse/core'
// 1. 跑通一个空插件 [不包含实际功能]
// 2. 在空插件中注册一个空的指令 [不包含具体的指令功能]
// 3. 编写具体的懒加载指令逻辑

// 插件
// 1. 插件的定义
// 2. 插件的注册  createApp() -> app -> app.use(插件)
// 3. 调用app.use注册插件的时候 相当于自动执行了插件的install方法 并且传入了一个app应用实例对象
const directivePlugin = {
  install (app) {
    // 插件的具体逻辑编写
    console.log(app)
    app.directive('img-lazy', {
      // 指令绑定的元素完成挂载时自动调用 内部可以访问dom
      mounted (el, binding) {
        // el: 指令放到那个标签身上 指的就是那个dom元素
        // binding.value: 指令等于号后面绑定的表达式的值
        console.log(el, binding.value)
        // 编写指令的核心逻辑-懒加载
        // 核心思路: 只有图片正式进入到视口区域 才发送图片的请求
        // 1. 如何判断进入到了视口？ vueUse
        // 2. 如何发送图片网络请求？ 给img.src = 有效的图片url
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }], observerElement) => {
            // isIntersecting: 布尔值 监听元素进入视口 true 走出视口 false
            // 这里的监听默认情况下 如果你不禁止 它会一直监听执行
            console.log(isIntersecting)
            if (isIntersecting) {
              el.src = binding.value
              stop()
            }
          }
        )
      }
    })
  }
}

export default directivePlugin
